<template>
  <pageHeader
    :title="route.query.saveId ? '修改工艺路线' : '新增工艺路线'"
    :breadCrumb="['工厂建模', '工艺路线管理', '工艺路线管理']"
    :show-back="true"
    ><template #footer>
      <a-space :size="20">
        <a-button @click="router.back()">取消</a-button>
        <a-button type="primary" @click="handleOk">保存</a-button>
      </a-space>
    </template>
    <a-spin :loading="loading" class="cantainer">
      <a-form auto-label-width :model="formData" ref="refForm" class="form">
        <a-row :gutter="15">
          <a-col :span="6">
            <a-form-item label="工艺路线编码">
              <a-input placeholder="无需输入，系统自动生成..." disabled />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item
              label="工艺路线名称"
              field="routerName"
              :rules="getRules('工艺路线名称')"
            >
              <a-input
                v-model="formData.routerName"
                :disabled="disabled"
                placeholder="请输入工艺路线名称"
              />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item
              label="工艺路线说明"
              field="routerInstructions"
              :rules="getRules('工艺路线说明')"
            >
              <a-input
                v-model="formData.routerInstructions"
                :disabled="disabled"
                placeholder="请输入工艺路线说明"
              />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item
              label="启用状态"
              field="state"
              :rules="getRules('启用状态')"
            >
              <a-select
                v-model="formData.state"
                placeholder="请选择"
                :disabled="disabled"
              >
                <a-option
                  v-for="(item, index) in ['启用', '停用']"
                  :key="item"
                  :value="index + 1"
                >
                  {{ item }}
                </a-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <GroupDataConfig ref="refGroupDataConfig" :disabled="disabled" />
    </a-spin>
  </pageHeader>
</template>

<script setup lang="ts">
  import { reactive, onMounted, ref, nextTick } from 'vue';
  import {
    GetProcessRoute,
    AddProcessRoute,
    EditProcessRoute,
  } from '@/api/FactoryModeling';
  import { useRoute, useRouter } from 'vue-router';
  import { TProcessRoute } from '@/api/FactoryModeling/type';
  import GroupDataConfig from './GroupDataConfig.vue';

  let route = useRoute();
  let router = useRouter();
  let refGroupDataConfig = ref();
  let loading = ref(false);
  let formData = reactive<TProcessRoute>({});
  let getRules = (name?: string) => {
    return [{ required: true, message: (name || '') + '不能为空' }];
  };

  let refForm = ref();
  let handleOk = async () => {
    try {
      let [check1, check2] = await Promise.all([
        refForm.value.validate(),
        refGroupDataConfig.value.getGroupData(),
      ]);
      if (!!check1 || !check2) return;
      let data: TProcessRoute = {
        ...formData,
        groupData: check2,
      };
      let res = formData.id
        ? await EditProcessRoute(data)
        : await AddProcessRoute(data);
      router.back();
    } catch (err) {
      console.log(err);
    }
  };

  let disabled = ref(false);
  onMounted(async () => {
    if (!route.query.saveId) return refGroupDataConfig.value.setGroupData();
    loading.value = true;
    try {
      let res = await GetProcessRoute({ id: route.query.saveId });
      refGroupDataConfig.value.setGroupData(res.groupData);
      if (route.query.disabled) disabled.value = true;
      Object.assign(formData, res);
    } catch (err) {
      console.error(err);
    }
    loading.value = false;
  });
</script>

<style scoped lang="less">
  .cantainer {
    width: 100%;

    .form {
      padding: 20px 20px 10px 20px;
    }
  }

  .box {
    padding-top: 10px;
    margin-top: 20px;
    border-top: 1px solid #e4e4e4;
    display: flex;
    justify-content: end;
    width: 100%;
  }
</style>
